<template>
  <div class="about-container">
    <!-- 顶部标题 -->
    <el-page-header class="page-header" @back="$router.go(-1)" content="关于豆豆银行" />

    <el-card class="about-card">
      <!-- 银行简介 -->
      <div class="section">
        <h2>豆豆银行简介</h2>
        <el-divider />
        <p>豆豆银行成立于2010年，是一家专注于数字化金融服务的现代商业银行。我们致力于为用户提供安全、便捷的金融服务体验。</p>
        <img src="@/assets/bank-building.jpg" alt="银行大楼" class="about-image">
      </div>

      <!-- 核心优势 -->
      <div class="section">
        <h2>我们的优势</h2>
        <el-divider />
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, index) in advantages" :key="index">
            <el-card shadow="hover" class="advantage-card">
              <div class="advantage-icon">
                <el-icon :size="30" :color="item.color">
                  <component :is="item.icon" />
                </el-icon>
              </div>
              <h3>{{ item.title }}</h3>
              <p>{{ item.desc }}</p>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 联系方式 -->
      <div class="section">
        <h2>联系我们</h2>
        <el-divider />
        <el-descriptions :column="1" border>
          <el-descriptions-item label="客服电话">400-888-9999</el-descriptions-item>
          <el-descriptions-item label="电子邮箱">service@doudoubank.com</el-descriptions-item>
          <el-descriptions-item label="总部地址">北京市海淀区xx路88号</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {
  Lock,
  Coin,
  Headset
} from '@element-plus/icons-vue'
import { ref } from 'vue'

const advantages = ref([
  {
    icon: Lock,
    title: '资金安全',
    desc: '采用多重加密技术，保障您的资金安全',
    color: '#67C23A'
  },
  {
    icon: Coin,
    title: '高收益理财',
    desc: '年化收益率最高可达5.8%的理财产品',
    color: '#E6A23C'
  },
  {
    icon: Headset,
    title: '24小时客服',
    desc: '全天候专业客服团队随时待命',
    color: '#409EFF'
  }
])
</script>

<style scoped>
.about-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 20px;
}

.about-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.section {
  margin-bottom: 30px;
}

.about-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 4px;
  margin-top: 15px;
}

.advantage-card {
  text-align: center;
  height: 100%;
  transition: transform 0.3s;
}

.advantage-card:hover {
  transform: translateY(-5px);
}

.advantage-icon {
  margin: 10px 0;
}

.advantage-card h3 {
  color: #303133;
  margin: 10px 0;
}

.advantage-card p {
  color: #606266;
  font-size: 14px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .about-container {
    padding: 10px;
  }

  .el-col {
    margin-bottom: 15px;
  }
}
</style>